<template>
<BaseSideBlock title="产量预估与实际对比" iconUrl="">
  <template #content>
    <div class="side-content scroller">
      <div>
        <div v-for="(item,index) in jdDatas" :key="'SideBlockZYGD'+index" class="side-content-panel">
          <el-text line-clamp="1" class="label">{{item.label}}</el-text>
          <div class="value">
            <el-progress :percentage="item.value*100" :stroke-width="10"></el-progress>
          </div>
        </div>
        <div v-for="(item,index) in jdDatas" :key="'SideBlockZYGDTwo'+index" class="side-content-panel">
          <el-text line-clamp="1" class="label">{{item.label}}</el-text>
          <div class="value">
            <el-progress :percentage="item.value*100" :stroke-width="10"></el-progress>
          </div>
        </div>
      </div>
    </div>
  </template>
</BaseSideBlock>
</template>

<script>
import BaseSideBlock from '../index.vue'

export default {
    name: "SideBlockNewCL",
    components: {
        BaseSideBlock
    },
    data() {
        return {
          jdDatas: [{
            label: '播种站',
            value: 0.32
          }, {
            label: '农户',
            value: 0.03
          }, {
            label: '田地',
            value: 0.27
          }, {
            label: '补助',
            value: 0.5
          }, {
            label: '赔偿',
            value: 1
          }, {
            label: '农药播撒率',
            value: 0.98
          }, {
            label: '士大夫',
            value: 0
          }, {
            label: '换行',
            value: 0
          }, {
            label: '天天和',
            value: 1
          }, {
            label: '副书记吗',
            value: 0.93
          }, {
            label: '如风vhy',
            value: 0.27
          }, {
            label: '返回有人推荐',
            value: 0.25
          }, {
            label: 'f方法是公布年报',
            value: 0.18
          }, {
            label: '啊v呈现出支持v',
            value: 0.4
          }, {
            label: '烦烦烦方法',
            value: 0
          }, {
            label: '哇哇哇哇',
            value: 0
          }, {
            label: '吞吞吐吐',
            value: 0
          }, {
            label: '混凝土一九年',
            value: 0
          }, {
            label: '不好听你',
            value: 0
          }, {
            label: '任天野黑特一号',
            value: 0
          }, {
            label: '67u拒绝见面规划',
            value: 1
          }, {
            label: '阿斯顿发射点发生',
            value: 1
          }]
        }
    },
    created() {},
    mounted() {},
    watch: {},
    computed: {},
    methods: {
    },
}
</script>

<style lang="scss" scoped>
@keyframes slide {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-40%);
  }
}
.side-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow-y: hidden;
  height: 100%;
  >div {
    animation: slide 20s linear infinite;
  }
  .side-content-panel {
    display: flex;
    align-items: center;
    color: #adacac;
    .label {
      font-size: 16px;
      color: #F1F1F1;
      width: 150px;
      padding-top: 5px;
      padding-left: 5px;
      padding-right: 10px;
      text-align: right;
    }
    .value {
      width: calc(100% - 70px);
      :deep(.el-progress-bar) {
        .el-progress-bar__outer {
          background-color: #2F97DC !important;

          .el-progress-bar__inner {
            background-color: #6DE1FF !important;
          }
        }
      }
      :deep(.el-progress__text) {
        font-size: 14px !important;
      }
    }
  }
}
</style>
